<template>
  <div class="plasticMaterial">
    <div class="title">产品信息（塑胶原料）</div>
    <el-divider></el-divider>

    <!-- 基本信息 -->
    <div class="companyInformation">
      <div class="content">
        <!-- 左侧表单 -->
        <div class="left">
          <div class="info">
            <!-- <el-form ref="form" :model="form" label-width="80px"> -->
            <el-form label-width="80px" :disabled="disabled">
              <el-form-item label="品名">
                <el-select
                  v-model="brand"
                  placeholder="请选择品名"
                  ref="brandScroll"
                  @change="changeBrand"
                >
                  <el-option
                    v-for="item in brandOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="厂家-牌号">
                <div class="SelectItem" v-show="!hideCompanySelect">
                  <input
                    class="input"
                    type="text"
                    :placeholder="selectList.placeholder"
                    @click="searchInfomation()"
                    v-model="value"
                    :disabled="disabled"
                  />
                  <!-- <div class="down"></div> -->

                  <div class="dropDown" v-if="selectList.showArea">
                    <div class="viewArea" ref="viewArea">
                      <ul
                        class="selectList"
                        ref="selectList"
                        @scroll="scroll(1)"
                      >
                        <li
                          v-for="(item2, selectListIndex) in selectList.list"
                          :key="selectListIndex"
                          class="item"
                          @click="saveData(item2)"
                        >
                          {{ item2.name }}
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="dropDown" v-if="markList.showArea">
                    <div class="viewArea" ref="viewArea">
                      <ul
                        class="selectList"
                        ref="selectList"
                        @scroll="scroll(2)"
                      >
                        <li
                          v-for="item in markList.list"
                          :key="item.name"
                          class="item"
                          @click="saveMarkData(item)"
                        >
                          {{ item.name }}
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </el-form-item>

              <el-form-item label="单价">
                <el-input
                  placeholder="请输入真实价格"
                  v-model="price"
                ></el-input>
                <span class="word">元/吨</span>
              </el-form-item>

              <el-form-item label="数量">
                <el-input placeholder="请输入数量" v-model="number"></el-input>
                <span class="word">吨</span>
              </el-form-item>

              <div class="companytype">
                <div class="leftText">是否含税</div>
                <div
                  class="selectItem"
                  v-for="(item, index) in itemList"
                  :key="index"
                  @click="selectTax(index)"
                >
                  <img
                    src="../../assets/bussiness/btn_dl_sel@2x.png"
                    class="checkImage"
                    alt=""
                    v-if="currentIndex == index"
                  />
                  <div class="checkbox" v-else></div>
                  {{ item.name }}
                </div>
              </div>

              <el-form-item label="包装标准">
                <el-select v-model="standard" placeholder="请正确选择">
                  <el-option
                    v-for="item in standardOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <div class="companytype">
                <div class="leftText">交货方式</div>
                <div
                  class="selectItem"
                  v-for="(item, index2) in wayList"
                  :key="index2"
                  @click="selectWay(index2)"
                >
                  <img
                    src="../../assets/bussiness/btn_dl_sel@2x.png"
                    class="checkImage"
                    alt=""
                    v-if="wayIndex == index2"
                  />
                  <div class="checkbox" v-else></div>
                  {{ item.name }}
                </div>
              </div>

              <el-form-item label="交货日期" v-if="way == '期货'">
                <el-date-picker
                  v-model="date"
                  type="date"
                  placeholder="请选择交货日期"
                  @change="changeDate"
                >
                </el-date-picker>
              </el-form-item>

              <el-form-item label="交货地" v-show="showAddress">
                <el-cascader
                  placeholder="请选择交货地"
                  :options="addressList"
                  :props="{ expandTrigger: 'hover', value: 'label' }"
                  @change="handleChange"
                  v-model="handleAddress"
                ></el-cascader>
              </el-form-item>

              <el-form-item label="地址简称" v-show="showabb">
                <el-input
                  placeholder="请输入地址简称（限制字数为10个）"
                  v-model="abbreviation"
                  maxlength="10"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>

    <!-- 按钮 -->
    <div v-if="disabled == false">
      <button class="cancelButton button" @click="cancel">取消</button>
      <button class="cancelButton button" @click="submit(0)">保存草稿</button>
      <button class="submitButton button" @click="submit(1)">提交上线</button>
    </div>
  </div>
</template>

<script>
import regionJson from "@/json/region";
import bus from "../../utils/bus.js";

export default {
  name: "plasticMaterial",
  props: {
    data1: Object,
    data: Object,
    disabled: Boolean,
  },
  data() {
    return {
      price: "",
      number: "",
      addressList: [],
      type: "",
      way: "",
      brand: "",
      brandOptions: [],
      standard: "",
      abbreviation: "",
      date: "",
      pageNo: 1,
      companyPageNo: 1,
      markNo: 1,
      pageSize: 10,
      total: 0,
      companytotal: 0,
      marktotal: 0,
      userInfo: {},
      standardOptions: [
        { value: "20KG/包" },
        { value: "25KG/包" },
        { value: "500KG/包" },
        { value: "800KG/包" },
        { value: "1000KG/包" },
      ],
      selectList: {
        placeholder: "请选择厂家牌名",
        list: [],
        showArea: false,
      },
      markList: {
        placeholder: "请选择牌名",
        list: [],
        showArea: false,
      },
      companyValue: "",
      companyId: "",
      markValue: "",
      markId: "",
      brandId: "",
      value: "",
      hideCompanySelect: false,
      handleAddress: [],
      itemList: [{ name: "是" }, { name: "否" }],
      wayList: [{ name: "现货" }, { name: "期货" }],
      currentIndex: -1,
      wayIndex: -1,
      draftId: "",
      showAddress: true,
      showabb: true,
    };
  },
  watch: {
    data(newData) {
      if (newData) {
        this.changeID();
      }
    },
  },
  created() {
    this.addressList = regionJson;
    this.changeID();
    this.brandList();

    let info = JSON.parse(sessionStorage.getItem("userInfo"));
    this.userInfo = info;
    // console.log("this.brandId", this.brandId);
  },
  mounted() {
    this.$refs.brandScroll.$refs.scrollbar.$refs.wrap.addEventListener(
      "scroll",
      this.brandScolling
    );
    bus.$on("updateDefaultProvince", (val) => {
      this.handleAddress = val;
    });
    bus.$on("updateDefaultCity", (val) => {
      this.handleAddress = val;
    });
    bus.$on("updateDefaultAbbreviation", (val) => {
      this.abbreviation = val;
    });
    // console.log("this.handleAddress", this.handleAddress);
    // console.log("this.abbreviation", this.abbreviation);
  },

  methods: {
    changeBrand() {
      this.selectList.showArea = true;
      for (let i = 0; i < this.brandOptions.length; i++) {
        if (this.brand == this.brandOptions[i].name) {
          this.brandId = this.brandOptions[i].id;
          // this.pageNo = 1;
          this.companyPageNo = 1;
          this.markNo = 1;
          this.companyList(false);
        }
      }
    },
    // 已上线/下线列表不同商品跳转
    changeID() {
      // console.log("发布this.data1", this.data1);
      // console.log("已上线塑胶data", this.data);
      if (this.data1.brandValue) {
        this.brand = this.data1.brandValue;
        this.companyId = this.data1.companyId;
        this.markId = this.data1.markId;
        this.brandId = this.data1.brandId;
        this.value = this.data1.companyValue + "--" + this.data1.markValue;
        this.handleAddress = [
          this.data1.defaultProvince,
          this.data1.defaultCity,
        ];
        this.abbreviation = this.data1.defaultAbbreviation;
        this.type = this.currentIndex = 1;
        this.way = this.wayIndex = 0;
        this.standard = this.standardOptions[1].value; //包装标准

        this.type = this.itemList[this.currentIndex].name;
        this.way = this.wayList[this.wayIndex].name;
        this.showAddress = true;
        this.showabb = true;
        // console.log("this.type", this.type);
        // console.log("this.way", this.way);
      } else {
        this.draftId = this.data.id;
        this.productId = this.data.productId;
        this.brand = this.data.productName;
        this.value = this.data.manufacturersName + "--" + this.data.markName;
        this.price = this.data.price;
        this.number = this.data.number;
        this.standard = this.data.packaging;
        this.type =
          this.data.taxInclusive == 1
            ? (this.currentIndex = 0)
            : (this.currentIndex = 1); //是否含税
        this.way =
          this.data.deliveryType == 1
            ? (this.wayIndex = 0)
            : (this.wayIndex = 1); //交货方式
        this.date = this.data.deliveryDate;
        this.handleAddress = [
          this.data.deliverySiteProvince,
          this.data.deliverySiteCity,
        ];

        this.type = this.itemList[this.currentIndex].name;
        this.way = this.wayList[this.wayIndex].name;

        this.abbreviation = this.data.abbreviationDelivery;
        // console.log("this.abbreviation", this.abbreviation);

        //判断简称地址是否为空
        if (this.abbreviation == "") {
          this.showabb = false;
          this.showAddress = true;
        } else if (this.abbreviation !== "") {
          this.showabb = true;
          this.showAddress = false;
        }
      }
    },

    // 品名列表
    async brandList(isBrand) {
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      if (this.brandSearch) {
        params.condition = this.brandSearch;
      }
      let res = await this.$apiFun.brandList(params);
      this.total = res.result.total;

      if (isBrand) {
        this.brandOptions.push(...res.result.rows);
      } else {
        this.brandOptions = res.result.rows;
      }

      this.selectList.showArea = false;
      for (let i = 0; i < this.brandOptions.length; i++) {
        if (this.brand == this.brandOptions[i].name) {
          this.brandId = this.brandOptions[i].id;
          // this.pageNo = 1;
          this.companyPageNo = 1;
          this.markNo = 1;
          this.companyList(false);
        }
      }
    },

    // 厂家列表
    async companyList(isCompany) {
      let params = {
        pageNo: this.companyPageNo,
        pageSize: this.pageSize,
        brandId: this.brandId,
        productId: this.brandId,
      };
      if (this.companySearch) {
        params.condition = this.companySearch;
      }
      let res = await this.$apiFun.companyList(params);
      this.companytotal = res.result.total;
      if (isCompany) {
        this.selectList.list.push(...res.result.rows);
      } else {
        this.selectList.list = res.result.rows;
      }
    },

    // 牌号列表
    async getmarkList(isMark) {
      let params = {
        pageNo: this.markNo,
        pageSize: this.pageSize,
        brandId: this.brandId,
        companyId: this.companyId,
        productId: this.brandId,
        manufacturersId: this.companyId,
      };
      if (this.markSearch) {
        params.condition = this.markSearch;
      }
      let res = await this.$apiFun.markList(params);
      this.marktotal = res.result.total;

      if (isMark) {
        this.markList.list.push(...res.result.rows);
      } else {
        this.markList.list = res.result.rows;
      }
    },

    // 品名滚动
    brandScolling() {
      let e = this.$refs.brandScroll.$refs.scrollbar.$refs.wrap;
      // console.log(e);

      if (this.noMore) return;
      // 到底时触发 loadMore
      let loadMore = e.scrollHeight - e.scrollTop <= e.clientHeight;
      if (loadMore) {
        this.pageNo += 1;
        this.brandList(true);
      }
    },

    // 厂家，牌号滚动
    scroll(index) {
      var clientHeight = this.$refs.selectList.clientHeight;
      var scrollHeight = this.$refs.selectList.scrollHeight;
      var scrollTop = this.$refs.selectList.scrollTop;

      // console.log("clientHeight", clientHeight);
      // console.log("scrollHeight", scrollHeight - scrollTop);

      if (clientHeight == scrollHeight - scrollTop) {
        if (
          index == 1 &&
          this.companyPageNo * this.pageSize < this.companytotal
        ) {
          this.companyPageNo += 1;
          this.companyList(true);
        } else if (index == 2 && this.markNo * this.pageSize < this.marktotal) {
          this.markNo += 1;
          this.getmarkList(true);
        }
      }
    },

    // 点击厂家
    saveData(item2) {
      this.companyValue = item2.name;
      this.companyId = item2.id;
      // console.log("this.companyId", this.companyId);
      // console.log("this.companyValue", this.companyValue);
      this.selectList.showArea = false;
      this.markList.showArea = true;
      this.markList.list = [];
      this.markNo = 1;
      this.getmarkList(false);

      this.value = this.companyValue;
    },

    // 点击牌号
    saveMarkData(item) {
      this.markValue = item.name;
      this.markId = item.id;
      console.log(" this.markId", this.markId);
      console.log(" this.markValue", this.markValue);

      this.markList.showArea = false;
      this.value = this.companyValue + "--" + this.markValue;
    },

    // 点击显示选择框
    searchInfomation() {
      this.selectList.showArea = true;
    },

    changeDate() {
      console.log("this.date", this.date);
    },

    // 点击是否含税
    selectTax(index) {
      this.currentIndex = index;
      this.type = this.itemList[this.currentIndex].name;
    },

    // 点击交货方式
    selectWay(index2) {
      this.wayIndex = index2;
      this.way = this.wayList[this.wayIndex].name;
      // console.log("this.way", this.way);
    },

    // 选择交货地
    handleChange(label) {
      this.province = label[0];
      this.city = label[1];
      this.data1.defaultProvince = label[0];
      this.data1.defaultCity = label[1];
      this.data.deliverySiteProvince = label[0];
      this.data.deliverySiteCity = label[1];
    },

    // status 0保存 1提交
    async submit(status) {
      console.log("this.abbreviation", this.abbreviation);
      // console.log("this.way", this.way);
      // console.log("this.date", this.date);
      // console.log("this.data1.brandValue",this.data1.brandValue);
      // console.log("this.data.productName",this.data1.productName);
      // console.log("this.province", this.province);
      // console.log("this.city", this.city);
      // console.log("this.abbreviation", this.abbreviation);
      // console.log("this.data1.defaultProvince", this.data1.defaultProvince);
      // console.log("this.data1.defaultCity", this.data1.defaultCity);
      // console.log(
      //   "this.data1.defaultAbbreviation",
      //   this.data1.defaultAbbreviation
      // );
      // console.log(
      //   "this.data.abbreviationDelivery",
      //   this.data.abbreviationDelivery
      // );
      // console.log(
      //   "this.data.deliverySiteProvince",
      //   this.data.deliverySiteProvince
      // );
      // console.log("this.data.deliverySiteCity", this.data.deliverySiteCity);
      if (
        // status为1判断是否填写完整
        // 1)发布供应页跳转进来提交
        status == 1 &&
        this.data1.brandValue !== undefined &&
        (this.brand == "" ||
          this.value == "" ||
          this.price == "" ||
          this.number == "" ||
          this.type == "" ||
          this.standard == "" ||
          this.way == "" ||
          (this.way == "期货" && this.date == "") ||
          // (this.abbreviation == undefined &&
          //   this.data1.defaultAbbreviation == undefined) ||
          (this.province == "" && this.city == "") ||
          (this.data1.defaultProvince == undefined &&
            this.data1.defaultCity == undefined))
      ) {
        this.$message.error("当前信息填写不完整，请检查并填写完整");
      } else if (
        // 2)已上线/已下线跳转进来提交
        status == 1 &&
        this.data.productName !== undefined &&
        (this.brand == "" ||
          this.value == "" ||
          this.price == "" ||
          this.number == "" ||
          this.type == "" ||
          this.standard == "" ||
          this.way == "" ||
          (this.way == "期货" && this.date == "") ||
          (this.abbreviation == undefined &&
            this.data.abbreviationDelivery == undefined) ||
          (this.data.deliverySiteProvince == undefined &&
            this.data.deliverySiteCity == undefined))
      ) {
        this.$message.error("请检查并填写完整信息");
      } else {
        for (let i = 0; i < this.brandOptions.length; i++) {
          if (this.brand == this.brandOptions[i].name) {
            this.productId = this.brandOptions[i].id;
            break;
          }
        }

        let params = {
          type: "PLASTIC", //塑胶原料
          productName: this.brand || this.data.productName,
          // productName:this.brand,
          productId: this.productId,
          manufacturersName: this.companyValue || this.data.manufacturersName,
          manufacturersId: this.companyId,
          markName: this.markValue || this.data.markName,
          markId: this.markId,
          price: this.price,
          number: this.number,
          taxInclusive: this.type == "是" ? 1 : 0,
          packaging: this.standard,
          deliveryType: this.way == "现货" ? 1 : 0,
          deliverySiteProvince:
            this.province ||
            this.data1.defaultProvince ||
            this.data.deliverySiteProvince,
          deliverySiteCity:
            this.city || this.data1.defaultCity || this.data.deliverySiteCity,
          abbreviationDelivery: this.abbreviation,
          deliveryDate: this.date || "",
        };
        params.status = status;

        if (status == 1) {
          console.log("this.data.id", this.data.id);
          //status 1提交
          // 已上线，下线列表跳转
          if (this.data.id) {
            params.id = this.draftId || "";
            params.memberId = this.userInfo.id;
            let res = await this.$apiFun.saveDraft(params);
            if (res.code == 200) {
              this.$message.success("已发布成功");
              this.successBack();
            }
          } else {
            // 发布供应跳转
            let res = await this.$apiFun.releaseSupply(params);
            if (res.code == 200) {
              this.$message.success("已发布成功");
              this.successBack();
            }
          }
        } else if (status == 0) {
          //status 0保存
          // 已上线，下线列表跳转
          if (this.data.id) {
            params.id = this.draftId;
            params.memberId = this.userInfo.id;
            let res = await this.$apiFun.saveDraft(params);
            if (res.code == 200) {
              this.$message.success("已保存成功");
              this.successBack();
            }
          } else {
            // 发布供应跳转
            let res = await this.$apiFun.releaseSupply(params);
            if (res.code == 200) {
              this.$message.success("已保存成功");
              this.successBack();
            }
          }
        }
      }
    },

    // 保存/提交成功后返回上级页面
    successBack() {
      setTimeout(() => {
        this.$emit("backToMain", {
          typeValue: this.data1.typeValue,
          status: this.data.status || "",
        });
      }, 1800);
    },

    cancel() {
      // console.log("this.data1",this.data1);
      // console.log("this.data",this.data);
      this.$emit("backToMain", {
        typeValue: this.data1.typeValue || "",
        status: this.data.status || "",
      });
    },
  },
};
</script>

<style lang="less" scoped>
ul::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
ul::-webkit-scrollbar-track {
  /* 滚动槽 */
  // -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
  border-radius: 10px;
  background: transparent;
}
ul::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  // -webkit-box-shadow: inset 0 0 5px rgba(167, 203, 244, 1);
  background: #dddee0;
}
.plasticMaterial {
  background: #ffffff;
  box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
  border-radius: 10px;
  padding: 0.3rem 0.5rem;
  font-family: Microsoft YaHei;
  height: 100%;
  .title {
    font-size: 0.24rem;
    font-weight: bold;
    color: #333333;
    line-height: 0.3rem;
    margin-bottom: 0.35rem;
    text-align: left;
  }

  // 基本信息
  .companyInformation {
    text-align: left;
    height: auto;

    .content {
      display: flex;
      // 左侧表单
      .left {
        width: 50%;

        .info {
          position: relative;
          // element表单样式
          /deep/ .el-form {
            .companytype {
              font-size: 0.16rem;
              display: flex;
              align-items: center;
              margin-bottom: 25px;
              .leftText {
                width: 110px;
              }
              .selectItem {
                display: flex;
                cursor: pointer;
                margin-left: 0.3rem;
                justify-content: space-between;

                .checkImage {
                  width: 0.22rem;
                  height: 0.22rem;
                }
                .checkbox {
                  width: 0.2rem;
                  height: 0.2rem;
                  border: 1px solid #999999;
                }
              }
              .selectItem:nth-child(2) {
                margin-left: 0;
              }
            }
            .el-form-item {
              z-index: 0 !important;
            }
            .el-input {
              width: 100%;
            }
            .el-textarea {
              width: 90%;
              height: 4.9rem;
            }
            .el-checkbox__inner {
              width: 0.2rem;
              height: 0.2rem;
              border: 1px solid #999999;
              border-radius: 2px;
              &::after {
                height: 0.12rem;
                left: 0.07rem;
              }
            }
            // 点击样式
            .is-checked {
              .el-checkbox__inner {
                background-color: #f42551;
              }
            }

            .el-form-item__label,
            .el-input__inner,
            .el-textarea__inner,
            .el-checkbox__label {
              font-size: 0.16rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
            }

            .el-input__inner,
            .el-input__count {
              background-color: #f5f5f5;
            }

            .el-textarea__inner {
              height: 100%;
              background-color: #f5f5f5;
            }

            .el-select,
            .el-cascader {
              width: 100%;
            }

            .el-form-item__label {
              width: 110px !important;
              text-align: left;
            }
            .el-form-item__content {
              margin-left: 110px !important;
              .word {
                position: absolute;
                right: 5%;
                top: 0;
                font-size: 0.16rem;
                font-weight: 400;
                color: #333333;
              }
            }
          }

          .SelectItem {
            width: 100%;
            height: auto;
            position: relative;
            // background: skyblue;
            .input {
              width: 92%;
              max-width: 3.6rem;
              height: 20px;
              border: 1px solid #dcdfe6;
              background: #f5f5f5;
              border-radius: 5px;
              font-size: 0.16rem;
              font-weight: 400;
              color: #333333;
              padding: 10px 0.15rem;
              cursor: pointer;
              outline: none;
            }
            // .down {
            //   width: 0.25rem;
            //   height: 100%;
            //   background: red;
            //   color: #c0c4cc;
            //   font-size: 14px;
            //   transition: transform 0.3s;
            //   transform: rotateZ(180deg);
            //   cursor: pointer;
            // }
            .dropDown {
              width: 100%;
              margin-top: 0.1rem;
              height: 2.3rem;
              position: absolute;
              z-index: 2;
              background: #fff;
              border-radius: 5px;
              text-align: left;
              .viewArea {
                width: 95%;
                height: 100%;
                padding: 0rem 0rem 0rem 0.2rem;
                box-shadow: 2px 2px 10px 0px #cccccc;
                .selectList {
                  width: 100%;
                  height: 2.35rem;
                  list-style: none;
                  overflow: auto;
                  padding-inline-start: 0;
                  margin-block-start: 0;
                  margin-block-end: 0;
                  .item {
                    width: 98%;
                    height: 0.4rem;
                    border-radius: 5px;
                    font-size: 0.16rem;
                    line-height: 0.4rem;
                    font-weight: 400;
                    // color: #333333;
                    color: #000;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;

                    &:hover {
                      background: #f5f7fa;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  // 按钮
  .button {
    width: 1.9rem;
    height: 0.4rem;
    border-radius: 5px;
    font-size: 0.16rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 0.3rem;
    border: 1px solid;
    margin-top: 0.8rem;
    cursor: pointer;
    margin-left: 0.2rem;
  }
  .cancelButton {
    color: #333333;
  }
  .submitButton {
    border: none;
    background: #f42551;
    color: #ffffff;
  }
}
</style>